<template>
  <input v-model="state.inputText" type="text" @keyup.enter="addTodoFn" class="todoInput">
  <button @click="addTodoFn">+</button>
  <ul class="todo-list">
    <li v-for="(todo,index) in state.list" :key="index" :class="{done:todo.done}" class="todo">
      <div @dblclick="toogleTodoFn(todo)" class="todo-inner">{{ todo.text }}</div>
      <button @click="removeTodoFn(todo)">-</button>
    </li>
  </ul>
</template>

<script>
import {reactive} from "vue";

export default {
  name: "Todo",
  props: {
    list: {
      type: Array,
      default: () => [
        {
          text: '123',
          done: false,
        },
        {
          text: '234',
          done: false,
        },
      ]
    },
  },
  setup() {
    const state = reactive({
      inputText: '',
      list: [],
    })

    function addTodoFn() {
      let todo = {
        text: state.inputText,
        done: false,
      }
      state.inputText = ''
      state.list.push(todo)
    }

    function removeTodoFn(todo) {
      let index = state.list.indexOf(todo)
      console.log('remove index', index)
      state.list.splice(index, 1)
    }

    function toogleTodoFn(todo) {
      todo.done = !todo.done
    }

    function doneTodoFn(todo) {
      todo.done = true
      console.log('todo', todo)
    }

    return {
      state,
      addTodoFn,
      removeTodoFn,
      doneTodoFn,
      toogleTodoFn,


    }
  }
}
</script>

<style lang="scss" scoped>
.todo-list {
  list-style: none;
  //background-color: black;
  margin: 0;
  padding: 0;
  .todoInput{

  }
  .todo {
    width: 100%;
    display: flex;
    //background-color: red;
    cursor: pointer;
    user-select: none;
    &-inner{
      display: flex;
      flex-grow: 1;
    }
    &.done {
      text-decoration: line-through;
    }
  }
}
</style>
